<template>
  <div class="page-container container">
    <div class="in-container search-form-box">
      <docSearchFormHidden
        class="search-form"
        ref="searchFormRef"
        size="small"
        :label-width="'60px'"
        :model="state.query"
        @search="getTableData"
        @reset="reset"
      >
        <el-row :gutter="8">
          <el-col :span="6">
            <el-form-item label="编号查询">
              <div class="search-flex">
                <el-select
                  style="width: 30%"
                  v-model="state.currrentType"
                  filterable
                  placeholder="编号类型"
                  clearable
                >
                  <el-option
                    v-for="item in state.numberTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input
                  style="margin-left: 4px; width: 70%"
                  v-model="state.currentNumber"
                  size="small"
                  placeholder="请输入"
                >
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="船名航次">
              <div class="search-flex">
                <selectDown
                  v-model:modelData="state.query.vessel"
                  placeholder="请输入后搜索"
                  urlType="CsShip"
                  style="width: 70%"
                  :remoteShowSuffix="false"
                >
                </selectDown>
                <selectDown
                  v-model:modelData="state.query.voyage"
                  placeholder="请输入后搜索"
                  urlType="CsVoyage"
                  style="width: 30%; margin-left: 4px"
                  :remoteShowSuffix="false"
                >
                </selectDown>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开航日期">
              <el-date-picker
                v-model="state.query.atd"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托单位">
              <selectDown
                v-model="state.requestName"
                placeholder="请输入后搜索"
                urlType="crcontactcompany"
                urlQueryData="委托单位"
                fit-input-width
                @getOption="setRequesterCode"
                @handleChange="requesterCodeChange"
                :labelSpaceBetween="true"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="6">
            <el-form-item label="订舱单位">
              <selectDown
                v-model="state.query.bookingParty"
                placeholder="请输入后搜索 "
                urlType="crcontactcompany"
                urlQueryData="订舱"
                :labelSpaceBetween="true"
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="船公司">
              <selectDown
                v-model:modelData="state.query.shipowner"
                placeholder="请输入后搜索"
                urlType="CsShipCompany"
                :labelSpaceBetween="true"
                :remoteShowSuffix="true"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装货港">
              <selectDown
                v-model:modelData="state.query.loadingPortCode"
                placeholder="请输入后搜索"
                urlType="port"
                :needPortCode="true"
                fit-input-width
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卸货港">
              <selectDown
                v-model:modelData="state.query.dischargePortCode"
                placeholder="请输入后搜索"
                urlType="port"
                :needPortCode="true"
                fit-input-width
                :remoteShowSuffix="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
        </el-row>
        <template #hidden>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item label="物流进度">
                <el-select
                  v-model="state.query.stateFlag"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in state.progressList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="退关状态">
                <el-select
                  v-model="state.query.isShutout"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in state.statusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务人员">
                <el-select
                  v-model="state.query.sailsman"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in state.employee"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="操作人员">
                <el-select
                  v-model="state.query.operator"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in state.employee"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item label="单证人员">
                <el-select
                  v-model="state.query.documentSpecialist"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in state.employee"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商务人员">
                <el-select
                  v-model="state.query.businessman"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in state.employee"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </docSearchFormHidden>
    </div>
    <div class="in-container table-box">
      <div class="btn-container tab">
        <div>
          <!-- <el-dropdown @command="typeOfBussiness">
            <el-button type="primary">
              显示方式 <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="1" style="min-width: 88px"
                  >按业务</el-dropdown-item
                >
                <el-dropdown-item command="2">按提单</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown> -->
        </div>
        <div style="display: flex">
          <div v-if="state.bussinenssType == '1'">
            <el-button type="primary" @click="newDetail"> 新增 </el-button>
            <!-- <el-button type="primary" @click="copySigle"> 复制 </el-button>
            <el-dropdown
              style="margin-left: 10px"
              @command="changeAuditDataStatus"
            >
              <el-button type="primary">
                确认审核
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1" style="min-width: 88px"
                    >审核通过</el-dropdown-item
                  >
                  <el-dropdown-item command="-1">审核驳回</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
            <el-button @click="customOpen" style="margin-left: 12px"
              >自定义列</el-button
            >
            <el-button
              type="default"
              @click="deleteData"
              style="margin-left: 12px"
            >
              批量删除
            </el-button>
          </div>
          <el-button
            icon="RefreshRight"
            style="margin-left: 12px"
            @click="getTableData"
          >
            刷新
          </el-button>
        </div>
      </div>
      <!-- 按业务 -->
      <AppPageTable
        class="table-boxes"
        stripe
        v-if="state.bussinenssType == '1' && false"
        :data="state.tableData.data"
        :option="state.tableData.option"
        autostyle="height:calc(100% - 160px);"
        @change="getTableData()"
        @dblClick="ondbl($event)"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          fixed="left"
        />
        <el-table-column
          show-overflow-tooltip
          prop="doccode"
          label="业务编号"
          width="120"
          sortable
        >
          <template #default="scope">
            <span
              style="color: #409eff; cursor: pointer"
              @click="clickOpenDetail(scope.row)"
            >
              {{ scope.row.doccode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="requester"
          align="center"
          label="委托单位"
          width="120"
        />
        <el-table-column
          show-overflow-tooltip
          prop="blno"
          align="center"
          label="提单号"
          width="120"
        />
        <el-table-column
          show-overflow-tooltip
          prop="shipowner"
          align="center"
          label="船公司"
          width="120"
        />
        <el-table-column
          show-overflow-tooltip
          prop="vessel"
          align="center"
          label="船名"
          width="120"
        />
        <el-table-column
          show-overflow-tooltip
          prop="voyage"
          align="center"
          label="航次"
          width="120"
        />
        <el-table-column
          show-overflow-tooltip
          prop="loadingPort"
          label="装货港"
          align="center"
          width="120"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dischargePort"
          label="卸货港"
          width="120"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="deadlineOrderTime"
          label="截单日期"
          width="160"
        >
          <template #default="scope">
            {{
              scope.row.deadlineOrderTime
                ? $utils.formatDateTime(
                    scope.row.deadlineOrderTime,
                    'YYYY-MM-DD HH:mm'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="deadlineCustomsTime"
          label="截关日期"
          width="160"
        >
          <template #default="scope">
            {{
              scope.row.deadlineCustomsTime
                ? $utils.formatDateTime(
                    scope.row.deadlineCustomsTime,
                    'YYYY-MM-DD HH:mm'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          label="预计开航"
          width="160"
        >
          <template #default="scope">
            {{
              scope.row.atd
                ? $utils.formatDateTime(scope.row.atd, 'YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="payment"
          label="付款方式"
          width="120"
        />
        <el-table-column show-overflow-tooltip label="签单类型" align="center">
          <template #default="scope"> {{ scope.row.billType }} </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="boxtypeOfNumber"
          align="center"
          label="箱型箱量"
          width="120"
        />
        <el-table-column
          show-overflow-tooltip
          label="当前状态"
          width="120"
          align="center"
        >
          <template #default="scope">
            {{
              scope.row.bookingState == 0
                ? '草拟'
                : scope.row.bookingState == 1
                ? '通过'
                : '驳回'
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="单据下载"
          width="120"
          align="center"
        >
          <template #default="scope">
            <span style="color: #409eff; cursor: pointer"> 下载 </span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="doccode"
          label="费用明细"
          width="120"
          align="center"
        >
          <template #default="scope">
            <span style="color: #409eff; cursor: pointer"> 查看 </span>
          </template>
        </el-table-column>
      </AppPageTable>
      <!-- 新业务表格 -->
      <AppPageTable
        class="table-boxes"
        stripe
        v-if="state.bussinenssType == '1'"
        :data="state.tableData.data"
        :option="state.tableData.option"
        autostyle="height:calc(100% - 160px);"
        @change="getTableData()"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          fixed="left"
        />
        <el-table-column
          show-overflow-tooltip
          prop="doccode"
          label="物流单号"
          width="120"
          sortable
        >
          <template #default="scope">
            <span
              style="color: #409eff; cursor: pointer"
              @click="clickOpenDetail(scope.row)"
            >
              {{ scope.row.doccode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="consignmentNo"
          label="发货单号"
          width="120"
          sortable
        >
          <template #default="scope">
            <span style="color: #409eff; cursor: pointer">
              {{ scope.row.consignmentNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="stateFlagValue"
          label="当前状态"
          width="120"
          sortable
        >
          <template #default="scope">
            <div class="flex-layout">
              <div class="green-circle"></div>
              {{ scope.row.stateFlagValue }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="shipowner"
          label="客户"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="cusotomerNumber"
          label="客户合同号"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="company"
          label="公司"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="loadingPort"
          label="起运港"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="preDeliveryDate"
          label="货好时间"
          width="120"
          sortable
        >
          <template #default="scope">
            {{
              scope.row.preDeliveryDate
                ? $utils.formatDateTime(
                    scope.row.preDeliveryDate,
                    'YYYY-MM-DD HH:mm'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="documentSpecialist"
          label="单证人员"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          label="验货时间"
          prop="deadlineOrderTime"
          width="120"
          sortable
        >
          <template #default="scope">
            {{
              scope.row.deadlineOrderTime
                ? $utils.formatDateTime(
                    scope.row.deadlineOrderTime,
                    'YYYY-MM-DD HH:mm'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="yanhuo"
          label="验货数量"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="dischargePort"
          label="目的港"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="vessel"
          label="船名"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="voyage"
          label="航次"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="boxtypeOfNumber"
          label="箱型箱量"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          label="开航日期"
          width="120"
          prop="atd"
          sortable
        >
          <template #default="scope">
            {{
              scope.row.atd
                ? $utils.formatDateTime(scope.row.atd, 'YYYY-MM-DD HH:mm')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="预计抵达日"
          width="120"
          prop="deadlineOrderTime22"
          sortable
        >
          <template #default="scope">
            {{
              scope.row.deadlineOrderTime
                ? $utils.formatDateTime(
                    scope.row.deadlineOrderTime,
                    'YYYY-MM-DD'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="提单时间"
          width="120"
          sortable
          prop="deadlineOrderTime33"
        >
          <template #default="scope">
            {{
              scope.row.deadlineOrderTime
                ? $utils.formatDateTime(
                    scope.row.deadlineOrderTime,
                    'YYYY-MM-DD'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="运输方式"
          width="120"
          prop="yunshu"
          sortable
        >
          <template #default="scope"> 海运 </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="货代名称"
          width="120"
          sortable
          prop="shipingAgent"
        >
          <template #default="scope">
            {{ scope.row.shipingAgent }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="业务员"
          width="120"
          prop="sailsman"
          sortable
        >
          <template #default="scope">
            {{ scope.row.sailsman }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="托运类型"
          width="120"
          sortable
        >
          <template #default="scope">
            {{ scope.row.fclLcl }}
          </template>
        </el-table-column>
      </AppPageTable>
    </div>
    <docDetailCreate
      :isCreate="true"
      ref="docDetailCreateRef"
      @refresh="getTableData"
    ></docDetailCreate>
    <el-dialog
      class="dialog"
      v-model="state.show"
      title="自定义列"
      width="800"
      :before-close="customHandleClose"
    >
      <Draggbale ref="draggbale" :items="state.customColumn"></Draggbale>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resetDraggbale">重置</el-button>
          <el-button @click="customHandleClose">取消</el-button>
          <el-button type="primary" @click="customHandleClose">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import AppSearchFormHidden from '@/components/AppSearchFormHidden.vue'
import docSearchFormHidden from './components/docSearchFormHidden.vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import docDetailCreate from './components/docDetailCreate.vue'
import { fileDownload } from '@/public/publicUtils'
import selectDown from './newBusiness/selectDownNew.vue'
import request from '@/public/request'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'
import Draggbale from '@/views/internal/exportContract/components/draggbale.vue'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'

const Router = useRouter()
const Route = useRoute()
const store = useStore()
// 页面元素
const docDetailCreateRef = ref(null)
// 查询和其他基础数据
const state = reactive({
  //表格数据
  tableData: {
    data: [],
    option: useTableOption()
  },
  // 业务员/操作人员/单证人员/商务人员
  employee: [],
  //弹窗控制数据
  dialogData: {
    show: false,
    btnLoading: false
  },
  // 业务显示类型 1:按业务 2：按提单
  bussinenssType: 1,
  // 当前选择的编号查询
  currrentType: '',
  currentNumber: '',
  //查询数据
  query: {
    doccode: null, //业务编号
    consignmentNo: null, //托运编号(拼箱隐藏）
    blno: null, //提单号
    contractNumber: null, //合约号
    atd: [], //开航日期
    vessel: null, // 船名
    voyage: null, // 航次
    stateFlag: '',
    requesterCode: null, // 委托单位
    bookingParty: null, // 订舱单位
    shipowner: null, // 船公司
    isShutout: null, // 退关状态
    sailsman: null, // 业务人员
    operator: null, // 操作人员
    documentSpecialist: null, // 单证人员
    businessman: null, // 商务人员
    loadingPortCode: null, // 装货港
    dischargePortCode: null // 卸货港
  },
  requestName: '',
  // 编号类型
  numberTypeList: [
    {
      label: '业务编号',
      value: 1
    },
    {
      label: '托运编号',
      value: 2
    },

    {
      label: '提单号',
      value: 3
    },
    {
      label: '合约号',
      value: 4
    }
  ],
  // 物流进度
  progressList: [
    { label: '订舱', value: 'booking_space' },
    { label: '放箱', value: 'release_container' },
    { label: '提柜', value: 'pick_container' },
    { label: '进港', value: 'enter_port' },
    { label: '海放', value: 'customs_release' },
    { label: '码放', value: 'wharf_release' },
    { label: '船开', value: 'ship_open' },
    { label: '抵港', value: 'arrive_port' },
    { label: '卸货', value: 'unloading' },
    { label: '提货', value: 'pick_cargo' }
  ],
  // 退关状态
  statusList: [
    // { label: '全部', value: '' },
    { label: '已退关', value: 0 },
    { label: '未退关', value: 1 }
  ],
  show: false,
  //自定义列
  customColumn: [
    { prop: 'doccode', label: '物流单号', width: '155' },
    { prop: 'consignmentNo', label: '发货单号', width: '155' },
    { prop: 'stateFlagValue', label: '当前状态', width: '155' },
    { prop: 'shipowner', label: '客户', width: '155' },
    { prop: 'cusotomerNumber', label: '客户合同号', width: '155' },
    { prop: 'company', label: '公司', width: '155' },
    { prop: 'loadingPort', label: '起运港', width: '155' },
    { prop: 'preDeliveryDate', label: '货好时间', width: '155' },
    { prop: 'documentSpecialist', label: '单证人员', width: '155' },
    { prop: 'deadlineOrderTime', label: '验货时间', width: '155' },
    { prop: 'yanhuo', label: '验货数量', width: '155' },
    { prop: 'dischargePort', label: '目的港', width: '155' },
    { prop: 'vessel', label: '船名', width: '155' },
    { prop: 'voyage', label: '航次', width: '155' },
    { prop: 'boxtypeOfNumber', label: '箱型箱量', width: '155' },
    { prop: 'atd', label: '开航日期', width: '155' },
    { prop: 'deadlineOrderTime22', label: '预计抵达日', width: '155' },
    { prop: 'deadlineOrderTime33', label: '提单时间', width: '155' },
    { prop: 'yunshu', label: '运输方式', width: '155' },
    { prop: 'shipingAgent', label: '货代名称', width: '155' },
    { prop: 'sailsman', label: '业务员', width: '155' },
    { prop: 'fclLcl', label: '托运类型', width: '155' }
  ]
})

//自定义列dialog打开
function customOpen() {
  state.show = true
}

//自定义列dialog关闭
function customHandleClose() {
  state.show = false
}

// 获取客户选择
async function getEmployeeData(val) {
  let res = await request.get('/api/user/getUserName', {
    keywords: val
  })
  state.employee = res.map((item) => {
    item.label = item.username
    item.value = item.username
    return item
  })
}

// 复制
async function copySigle() {
  if (state.tableData.option.selected.length == 1) {
    let data = JSON.parse(JSON.stringify(state.tableData.option.selected[0]))
    data.id = 0
    let res = await request.post('/api/sebooking/copyBooking', data)
    if (res.status) {
      ElMessage.success(res.message)
      getTableData()
    } else {
      ElMessage.error(res.message)
    }
  } else {
    ElMessage.warning('请选择一条数据')
  }
}

// 设置code
function setRequesterCode(item) {
  state.query.requesterCode = item.rigthName
}

function requesterCodeChange(val) {
  if (!val) {
    state.query.requesterCode = ''
  }
}

function setState(stateFlag) {
  let text = ''
  switch (stateFlag) {
    case 'booking_space':
      text = '订舱'
      break
    case 'release_container':
      text = '放箱'
      break
    case 'pick_container':
      text = '提柜'
      break
    case 'enter_port':
      text = '进港'
      break
    case 'customs_release':
      text = '海放'
      break
    case 'wharf_release':
      text = '码放'
      break
    case 'ship_open':
      text = '船开'
      break
    case 'arrive_port':
      text = '抵港'
      break
    case 'unloading':
      text = '卸货'
      break
    case 'pick_cargo':
      text = '提货'
      break
    default:
      text = '创建'
  }
  return text
}

/**
 * 重置
 */
function reset() {
  state.query = {
    doccode: null, //业务编号
    consignmentNo: null, //托运编号(拼箱隐藏）
    blno: null, //提单号
    contractNumber: null, //合约号
    etd: [], //开航日期
    vessel: null, // 船名
    voyage: null, // 航次
    stateFlag: '',
    requesterCode: null, // 委托单位
    bookingParty: null, // 订舱单位
    shipowner: null, // 船公司
    isShutout: null, // 退关状态
    sailsman: null, // 业务人员
    operator: null, // 操作人员
    documentSpecialist: null, // 单证人员
    businessman: null, // 商务人员
    loadingPortCode: null, // 装货港
    dischargePortCode: null // 卸货港
  }
  state.requestName = ''
  state.currrentType = ''
  state.currentNumber = ''
  state.tableData.option.page = 1
  getTableData()
}
/**
 * 删除业务
 */
function deleteData() {
  if (state.tableData.option.selected.length != 0) {
    let deleteArray = []
    state.tableData.option.selected.forEach((t) => deleteArray.push(t.id))
    ElMessageBox.confirm('确定删除？', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        request
          .post('/api/sebooking/delete', {
            idArray: deleteArray
          })
          .then((res) => {
            if (res.status) {
              ElMessage.success(res.message)
              getTableData()
            } else {
              ElMessage.error(res.message)
            }
          })
      })
      .catch(() => {
        // ElMessage.info('取消删除')
      })
  } else {
    ElMessage.warning('请至少选择一条数据')
  }
}
//切换业务和提单标识符
function typeOfBussiness(val) {
  state.bussinenssType = val
}
/**
 * 表格获取数据
 */
function getTableData() {
  state.tableData.option.loading = true
  state.query.doccode = ''
  state.query.consignmentNo = ''
  state.query.blno = ''
  state.query.contractNumber = ''
  switch (state.currrentType) {
    case 1:
      state.query.doccode = state.currentNumber
      break
    case 2:
      state.query.consignmentNo = state.currentNumber
      break
    case 3:
      state.query.blno = state.currentNumber
      break
    case 4:
      state.query.contractNumber = state.currentNumber
      break
  }
  let url = '/api/sebooking/querypage'
  let param = JSON.parse(JSON.stringify(state.query))
  param.PageIndex = state.tableData.option.page
  param.PageSize = state.tableData.option.pageSize
  request
    .post(url, param)
    .then((res) => {
      res.content.forEach((item) => {
        item.stateFlagValue = setState(item.stateFlag)
        let boxTypeObj = {}
        for (const iterator of item.containerSums) {
          let boxKeysList = Object.keys(boxTypeObj)
          if (boxKeysList.indexOf(iterator.ctnType) != -1) {
            boxTypeObj[iterator.ctnType] += iterator.ctnDigit
          } else {
            boxTypeObj[iterator.ctnType] = iterator.ctnDigit
          }
        }
        let operationKeysList = Object.keys(boxTypeObj)
        item.boxtypeOfNumber = ''
        operationKeysList.forEach((value, index) => {
          item.boxtypeOfNumber =
            item.boxtypeOfNumber + '' + value + 'X' + boxTypeObj[value] + ';'
        })
        item.boxtypeOfNumber = item.boxtypeOfNumber.substr(
          0,
          item.boxtypeOfNumber.length - 1
        )
      })
      state.tableData.data = res.content
      state.tableData.option.total = res.totalElements
    })
    .finally(() => {
      state.tableData.option.loading = false
    })
}
/**
 * 改变审核数据状态
 * @param {object} data - 下拉选择命令
 */
function changeAuditDataStatus(data) {
  let newArray = []
  state.tableData.option.selected.forEach((t) => {
    newArray.push(t.id)
  })
  if (newArray.length != 0) {
    request
      .post('/api/sebooking/check', {
        IdArray: newArray,
        State: data
      })
      .then((res) => {
        if (res.status) {
          ElMessage.success(res.message)
          getTableData()
        } else {
          ElMessage.error(res.message)
        }
      })
  } else {
    ElMessage.warning('请选择一条数据')
  }
}
/**
 * 新增业务,创建水单
 */
function newDetail() {
  docDetailCreateRef.value.open()
}
/**
 * 表格选择后打开详情
 */
function openDetail() {
  if (state.tableData.option.selected.length == 1) {
    toDetail(state.tableData.option.selected[0])
  } else {
    ElMessage.warning('请选择一条数据')
  }
}
/**
 * 点击表格数据打开详情
 * @param {object} row - 表格行数据
 */
function clickOpenDetail(row) {
  toDetail(row)
}
// 跳转提单详情
function clickOpenDetailBill(row) {
  toDetail(row)
}
/**
 * 双击表格数据打开详情
 * @param {object} row - 表格行数据
 */
function ondbl(row) {
  toDetail(row)
}
/**
 * 跳转到详情页
 * @param {object} row - 表格行数据
 */
function toDetail(row) {
  let path = '/business/bussinessIndex/docWorkNewdetail'
  if (state.bussinenssType == '2') {
    path = '/business/docDetailBillOfLoading'
  }
  Router.openTab({
    path: path,
    query: {
      id: row.id,
      title: `订舱详情`,
      establish: false,
      isJump: true
    }
  })
}

onMounted(() => {
  getTableData()
  getEmployeeData()
})
</script>

<style lang="scss" scoped>
@import '@/styles/business/business.scss';
.container {
  display: flex;
  flex-direction: column;

  .search-flex {
    display: flex;
    align-items: center;
    width: 100%;
  }

  :deep(.el-date-editor) {
    width: 100%;
  }

  // :deep(.el-select) {
  //   width: 100%;
  // }
  .search-form-box {
    height: auto;
    margin-bottom: 8px;
  }

  .table-box {
    flex: 1;

    .tab {
      margin-bottom: 8px;
    }

    .btn-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .table-boxes {
      // :deep(.el-table__body-wrapper) {
      //   height: auto !important;
      // }
      :deep(
          .el-table__body-wrapper .el-table-column--selection > .cell,
          .el-table__header-wrapper .el-table-column--selection > .cell
        ) {
        display: block;
      }

      :deep(.el-table th.el-table__cell) {
        color: #000000d8;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px;
        letter-spacing: 0px;
      }

      :deep(.el-table td.el-table__cell div) {
        color: #000000;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px;
        letter-spacing: 0px;
      }

      :deep(.el-table th.el-table__cell.is-sortable div) {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>
